<!DOCTYPE html>
<html>
    <head>
        <title>联云在线数据库管理系统</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./js/db_api.js"></script>
        <script src="./js/db_mannage.js"></script>
        <link rel="stylesheet" type="text/css" href="css/index.css">
    </head>
    <body style="width: 100%;height: 100vh;margin: 0px;padding: 0px;background-image: url(./img/background.jpg);">
        <div align="center">
            <div align="left" style="padding: 15px;max-width: 1000px;width: calc(100% - 100px);height: calc(100vh - 100px);;background-color: rgba(231, 231, 231, 0.281);backdrop-filter: blur(4px);margin-top: 50px;;border-radius: 10px;">
                <a id="name">所在数据库名称: /</a>
                <a id="data_name" style="margin-left: 20px;">当前所选数据名称: /</a>

                <Br /><br />
                <button onclick="show_databases()">刷新数据库列表</button>
                <button onclick="create_new_db()">新建数据库</button>
                <button onclick="delete_current_db()">删除当前数据库</button>
                <button onclick="delete_data()">删除当前所在的数据</button>
                <button onclick="show_create_data()">在当前数据库中新建数据</button>
                <button onclick="show_create_key()">在当前数据中插入键值对</button>
                <button onclick="back_select_db()">返回所选数据库</button>
                <button onclick="search_db()">搜索数据库</button>
                <button onclick="search_data()">从数据库中搜索数据</button>
                <div id="data_list" style="overflow-y: scroll;margin-left: 30px;padding: 15px;max-width: 1000px;width: calc(100% - 100px);height: calc(90% - 150px);;background-color: rgba(255, 255, 255, 0.438);margin-top: 50px;;border-radius: 10px;">

                </div>
            </div>
        </div>
        <style>
            .button_1 {
                width: 100%;
                height: 35px;
                text-align: left;
                margin-top: 5px;
            }
            input {
                width: calc(100% - 10px);
                height: 30px;
                background-color: white;
                border: none;
                border-radius: 2px;
                outline: none;
            }
            input:hover {
                background-color: #f2f2f2;

            }
        </style>
        <div id="create_data" style="display: none;padding: 10px;backdrop-filter: blur(10px);top: 100px;left: calc(50% - 300px);position: absolute;width: 500px;height: 600px;background-color: rgba(158, 158, 158, 0.329);border-radius: 10px;">
            <h3>新建数据</h3>
            <p>所处数据库: <span id="db_name_create"></span></p>
            <input placeholder="数据名称" id="data_name_create" />
            <br /><br />
            <script>
                function new_key_value() {
                    var key = document.createElement("input");
                    var value = document.createElement("input");

                    key.style.width = "48%";
                    value.style.width = "48%";
                    key.style.marginTop = "5px";
                    value.style.marginTop = "5px";
                    key.style.marginRight = "5px";
                    key.placeholder = "Key名称";
                    value.placeholder = "Value值";

                    document.getElementById("key_value_list").appendChild(key);
                    document.getElementById("key_value_list").appendChild(value);
                }
            </script>
            <button onclick="new_key_value()">新的键值对</button>
            <div id="key_value_list" style="overflow-y: scroll;border-radius: 10px;width: 98%;background-color: rgba(255, 255, 255, 0.397);height: calc(90% - 200px);">
                <input style="width: 48%;" placeholder="Key名称" />
                <input style="width: 48%;" placeholder="Value值" />
            </div>
            <br /><br />
            <button onclick="create_data_to_db()">创建数据</button>
            <button onclick="document.getElementById('create_data').style.display = 'none';">取消</button>
        </div>

        <div id="create_key" style="display: none;padding: 10px;backdrop-filter: blur(10px);top: 100px;left: calc(50% - 300px);position: absolute;width: 500px;height: 600px;background-color: rgba(158, 158, 158, 0.329);border-radius: 10px;">
            <h3>在所选数据中插入键值对</h3>
            <p>所处数据: <span id="data_name_create_1"></span></p>
            <script>
                function new_key_value() {
                    var key = document.createElement("input");
                    var value = document.createElement("input");

                    key.style.width = "48%";
                    value.style.width = "48%";
                    key.style.marginTop = "5px";
                    value.style.marginTop = "5px";
                    key.style.marginRight = "5px";
                    key.placeholder = "Key名称";
                    value.placeholder = "Value值";

                    document.getElementById("key_value_list_1").appendChild(key);
                    document.getElementById("key_value_list_1").appendChild(value);
                }
            </script>
            <button onclick="new_key_value()">新的键值对</button>
            <div id="key_value_list_1" style="overflow-y: scroll;border-radius: 10px;width: 98%;background-color: rgba(255, 255, 255, 0.397);height: calc(90% - 200px);">
                <input style="width: 48%;" placeholder="Key名称" />
                <input style="width: 48%;" placeholder="Value值" />
            </div>
            <br /><br />
            <button onclick="create_key_to_data()">插入键值对</button>
            <button onclick="document.getElementById('create_key').style.display = 'none';">取消</button>
        </div> 
        <div id="fix_key" style="display: none;padding: 10px;backdrop-filter: blur(10px);top: 100px;left: calc(50% - 300px);position: absolute;width: 500px;height: 600px;background-color: rgba(158, 158, 158, 0.329);border-radius: 10px;">
            <h3>修改键值对</h3>
            <p>所处Key: <span id="key_name"></span></p>
            <p>现在的值: <span id="value_now"></span></p>
            <input placeholder="Value值" id="value_create" />
            <br /><br />
            <button onclick="delete_key_to_data(document.getElementById('key_name').innerText)">删除该键值对</button>
            <button onclick="save_fix_key(document.getElementById('key_name').innerHTML,document.getElementById('value_now').innerHTML,document.getElementById('value_create').innerText)">修改</button>
            <button onclick="document.getElementById('fix_key').style.display = 'none';">取消</button>
        </div> 
        <style>
            button {
                height: 35px;;
                border: none;
                margin-top: 5px;
                border-radius: 5px;
            }
            button:hover {
                background-color: #cfcfcf;

            }
        </style>
    </body>
</html>